<template>
    <div class="contain-box">
        <div class="container">
            <img v-for="(item,index) in containerImg" :key="index+'0'"  :src="item.src" alt="">
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            containerImg: [{
                src: require("../../assets/c1.jpg")
            },{
                src: require("../../assets/c2.jpg")
            },{
                src: require("../../assets/c3.jpg")
            },{
                src: require("../../assets/c2_1.jpg")
            },{
                src: require("../../assets/c2_2.jpg")
            },{
                src: require("../../assets/c2_3.jpg")
            }]
        }
    }
}
</script>
<style scoped>
    .contain-box {
        width: 100%;
        background: #eeeeee;
        margin-top: 120px;
        padding-bottom: 30px;
    }
    .container {
        width: 1000px;
        height: 200px;
        margin: 0 auto;
        overflow: hidden;
        padding: 30px 0px;
    }
    .container img {
        width: 16%;
        height: 230px;
        float: left;
        margin-right: .6%;
        transition: transform 1s;
    }
    .container img:hover {
        transform: rotateY(180deg);
    }
</style>